<?php 
$url = $this->baseUrl();
?>
<link href="http://fonts.googleapis.com/css?family=Astloch:400,700|Nixie+One|Prociono|Crafty+Girls|Yellowtail|Permanent+Marker|Unkempt:400,700|Cabin:400,500,600,700,400italic,500italic,600italic,700italic|Playfair+Display:400,400italic|Crushed|Sue+Ellen+Francisco|Sorts+Mill+Goudy:400,400italic|News+Cycle:400,700|Cabin+Sketch:400,700|Delius+Swash+Caps|Montez|Philosopher:400,700,400italic,700italic|Corben:400,700|Paytone+One|Josefin+Sans:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic|Limelight|Schoolbell|Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic|Monofett|Just+Me+Again+Down+Here|Monoton|Chewy|Coda:400,800|Comfortaa:400,300,700|Coming+Soon|Actor|Amaranth:400,700,400italic,700italic|Architects+Daughter|Buda:300|Cardo:400,700,400italic|Carme|Carter+One|Fascinate|Princess+Sofia|Codystar|Frijole|Bonbon|Gorditas|Architects+Daughter|Pacifico|Megrim|Norican|Spirax" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo $url;?>/application/templates/front/default/js/fabric.js"></script>
<script type="text/javascript" src="<?php echo $url;?>/application/templates/front/default/js/spectrum.js"></script>
<script src="<?php echo $url;?>/application/templates/front/default/js/canvas2image.js"></script>
<script src="<?php echo $url;?>/application/templates/front/default/js/JIC.js"></script>


<div class="container-fluid" style="width: 890px;">

	<div class="row-fluid" style="margin-top: 20px;">
	
		<div class="span8" style="width: 100%;">
		<div class="social-box" style="margin-bottom: 12px; padding-bottom: 12px;">
		<div class="header">
		<h4 class="" style="margin-top: 8px !important;">
		<i class="icon-user"></i>
		Mô tả thông tin photo
		</h4>
		</div>
		<div class="body" style="position: relative;min-height: 135px;">
		
		<textarea id="description-photo" style="width: 50%; height: 50px;" placeholder="Nhập nội dung mô tả"></textarea>
		<p  style="font-size: 11px;">
			Ví dụ: Hàng Hot của Samsung Galaxy : quý cô thông minh, lung linh và xinh xắn <br>
			Mua ngay!
		</p>
						
		<label class="control-label" style="width: 50px;float: left; margin-top: 3px;">Giá bán </label>
		<input placeholder="Giá bán" class="span6" type="text" style="float: left; width:100px; margin: 0px 5px 0px 5px;"/>
		<span class="help-inline" style="float:left; margin-top: 3px;">VNĐ</span>
				
		</div>
		</div>
		</div>
	</div>
	
	<div class="row-fluid">
	
		<div class="span8" style="width: 100%;background: white;padding-bottom: 15px;border-radius: 3px;box-shadow: 0px 1px 2px rgba(196, 197, 201, 0.75);">
		<div class="social-box" style="border: 0;margin-bottom: 12px;box-shadow: none;">
		<div class="header">
		<h4 class="" style="margin-top: 8px !important;">
		<i class="icon-user"></i>
		Hình ảnh sản phẩm
		</h4>
		</div>
		<div class="body" style="position: relative; padding-top: 0;">
		
			<div class="editor" style="clear: left; position: relative;" >
			
			
			<div class="advanced-tab" style="float:left; padding-bottom: 20px;">
				<ul id="advancedTab1" class="nav nav-tabs" style="margin-bottom: 0; border-bottom: 0; height: 50px;">
				<li class="active"><a href="#text" data-toggle="tab"> <i class="icon-font"></i>Nội dung</a></li>				
				<li class=""><a href="#sticker" data-toggle="tab"><i class="icon-picture"></i> Sticker & icon</a></li>			
				</ul>
				
				<div class="tab-content" style="overflow: hidden;">
					<div class="tab-pane" id="sticker">
						<div style="position: relative; width: 92%;">
							<ul style="list-style-type: none; float: left; height: 90px; overflow-y:auto; ">
								<?php for($i=1;$i<38;$i++):?>
								<li style="float: left;width: 80px;padding: 5px; cursor: pointer;" onclick="selectSticker('<?php echo $i;?>');">
									<img id="item<?php echo $i;?>" src="<?php echo $url;?>/application/public/images/items/item<?php echo $i;?>.png" >
									
									<script type="text/javascript">
										(function(){
											$( "#item<?php echo $i;?>" ).dblclick(function() {
												addSticker();
											});
										})();						
									</script>
									
								</li>
								
								<?php endfor;?>
							</ul>
							<div style="clear: left;">
								<input type="hidden" id="select-sticker" value="">
								<button class="btn btn-primary" onclick="addSticker();">Gắn Sticker</button>
							</div>
							
						</div>
					</div>
	                <div class="tab-pane active" id="text">
	                	
	                	<div id="text_editor_wrap" style="clear: left;">

							<div id="edit_content_text" class="less_opacity" style="float: left;">
							
								<div class="font_type_dd">
								
									<select id="font-family" style="width: 120px;">
								        <option value="arial">Arial</option>
								        <option value="helvetica" selected="">Helvetica</option>
								        <option value="myriad pro">Myriad Pro</option>
								        <option value="delicious">Delicious</option>
								        <option value="verdana">Verdana</option>
								        <option value="georgia">Georgia</option>
								        <option value="courier">Courier</option>
								        <option value="comic sans ms">Comic Sans MS</option>
								        <option value="impact">Impact</option>
								        <option value="monaco">Monaco</option>
								        <option value="optima">Optima</option>
								        <option value="hoefler text">Hoefler Text</option>
								        <option value="plaster">Plaster</option>
								        <option value="engagement">Engagement</option>
						      		</select>
								
								</div>
								
								<div class="font_type_dd">
								
									<select id="text-font-size" style="width: 60px;">
										<option value="9">9</option>
										<option value="10">10</option>
										<option value="12">12</option>
										<option value="13">13</option>
										<option value="14">14</option>
										<option value="16">16</option>
										<option value="18">18</option>
										<option value="24">24</option>
										<option value="28" selected="selected">28</option>
										<option value="36">36</option>				
										<option value="36">40</option>
										<option value="36">44</option>
										<option value="36">50</option>
									</select>
								
								</div>
								
								<div id="text_colorpicker">
									<input type="color" id="color" />			
									
									<script>
										$("#color").spectrum({
						    				color: "#f00",
										    showInput: true,
										    showInitial: true,
										    showAlpha: true,				    				    
										    showPalette: true,
										});
									</script>
								</div>
								
								<div id="font_style_icons">
								
									<input type="checkbox" name="font_style_bold" id="font_style_bold" title="Bold">
									<label for="font_style_bold" class="bold_label" title="Bold"><b>B</b></label>
									<input type="checkbox" name="font_style_italic" id="font_style_italic">
									<label for="font_style_italic" class="italic_label" title="Italic"><i>I</i></label>
									<input type="checkbox" name="font_style_underline" id="font_style_underline">
									<label for="font_style_underline" class="underline_label" title="Underline"><u>U</u></label>
									<input type="checkbox" name="font_style_linethrough" id="font_style_linethrough">
									<label for="font_style_linethrough" class="linethrough_label" title="Linethrough"><u>U</u></label>
								</div>
								
							</div>
							
						</div>
	                	
	                	<div id="text-wrapper" style="position: relative;margin-top: 5px;width: 100%;">
		
							<textarea id="text-canvas" style="width: 480px; height: 50px;"></textarea>
		
						</div>
						<div>
	                		<button id="add-text" class="btn btn-primary" type="button" style="float: left;">Add text</button>
	                	</div>
	                </div>
                </div>
			</div>
			<div id="canvas-editor" style="position: relative; float: left; padding-right: 10px;">
					
			</div>
			<div id="canvas_loading" style="display: none;" >
				<img alt="Circle_loader_cover" id="canvas_loading_spinner" src="http://d1x1klo9zku3iu.cloudfront.net/assets/circle_loader_cover-f0de6de2b230746f2f712cb563b81879.gif">
				<div id="image-uploading-progress-text">Hệ thống đang upload photo. Vui lòng đợi...</div>
			</div>
			
			<div id="text-wrapper" style="display: none;position: relative;margin-top: 10px;width: 100%;">
				
				<textarea id="text" style="width: 250px;"></textarea>
				
			</div>
			
			<form enctype="multipart/form-data" name="upload" id="myForm" method="POST" action="<?php echo $url;?>/app/index/uploadphoto/">
				<a href="#" style="display: none;" id="browse"></a>	
				<input type="file" id="myfile" multiple="multiple"  name="myfile[]" style="display: none;" />
			</form>
			
			<div class="" style="clear: left; padding-top: 20px;">
				<!-- 
				<div id="image-change" style="display: none;">
				
					<button class="btn">Thay đổi Image</button>
				
				</div>	
				 -->
				<div id="scale-angle" style="display: none;">
				
					<div id="scale-angle1" style="margin: auto;width: 200px;float: left;">
				    	Scale:<input type="range" style="display: none;" name="scale-control" id="scale-control" value="1" min="0.1" max="3" step="0.1">
				  	</div>
				  	<div id="scale-angle2" style="margin: auto; width: 200px;float: left;">
				    	Angle:<input type="range" style="display: none;" name="angle-control" id="angle-control" value="0" min="-90" max="90">
				  	</div>
				  	<input id="image-change" class="btn btn-primary" type="button" value="Đăng ảnh" style="float:left;margin: 50px 0px 0px -400px;"/>
			  	
			  	</div>
			  	
			</div>
		  	
		  	<script>
		    	$(":range").rangeinput();
		  	</script>
		  	
		  	 	
			</div>
				
		
		</div>
		</div>
		</div>

 
	</div>

	<div class="row-fluid" style="margin-top: 10px;width: 890px;">
	
		<div class="span8" style="width: 100%;">
		<div class="social-box" style="margin-bottom: 12px;">
		<div class="header">
		<h4 class="" style="margin-top: 8px !important;">
		<i class="icon-user"></i>
		Template
		</h4>
		</div>
		<div class="body" style="position: relative;">
		
			<div style="height: 100px;">
				<ul class="template">
                  <li><a href="javascript:void(0);" onclick="createCanvas(1,0);"><img src="<?php echo $url;?>/application/public/images/temp1.png" /></a></li>
                  <li><a href="javascript:void(0);" onclick="createCanvas(2,4);"><img src="<?php echo $url;?>/application/public/images/temp1.png" /></a></li>                  
                  <li><a href="javascript:void(0);" onclick="createCanvas(2,1);"><img src="<?php echo $url;?>/application/public/images/temp2.png" /></a></li>
                  <li><a href="javascript:void(0);" onclick="createCanvas(2,2);"><img src="<?php echo $url;?>/application/public/images/temp3.png" /></a></li>
                  <li><a href="javascript:void(0);" onclick="createCanvas(2,3);"><img src="<?php echo $url;?>/application/public/images/temp4.png" /></a></li>
                  <li><a href="javascript:void(0);" onclick="createCanvas(3,0);"><img src="<?php echo $url;?>/application/public/images/temp5.png" /></a></li>
                </ul>
			
			</div>		
		
		</div>
		</div>
		</div> 
	</div>
	
	<div class="row-fluid">
	
		<input class="btn btn-large btn-primary" style="float: right;" type="submit" onclick="publishPhoto();" id="btn-publish" value="Publish">
	
	</div>
	
	
	<div class="row-fluid" style="display: none;" id="publish-photo">
	
		<div class="span8" style="width: 100%;">
		<div class="social-box" style="margin-bottom: 12px;">
		<div class="header">
		<h4 class="" style="margin-top: 8px !important;">
		<i class="icon-user"></i>
		Publish
		</h4>
		</div>
		<div class="body" style="position: relative; height: 480px;">
			
			<div style="position: relative;">
			
						<input type="hidden" id="product-detail" value="" />
			
                  		<div id="canvas_loading_publish" style="display: none;" >
							<img alt="Circle_loader_cover" id="canvas_loading_spinner" src="http://d1x1klo9zku3iu.cloudfront.net/assets/circle_loader_cover-f0de6de2b230746f2f712cb563b81879.gif">
							<div id="image-uploading-progress-text-publish">Hệ thống đang upload photo của bạn đến Fanpage. Vui lòng đợi...</div>
						</div>
                  		<div id="cv-publish" style="float: left;">
                  			<canvas id="publish" width="400" height="400"></canvas>
                  		</div>
                  		<div style="margin-left: 10px; float: left;width: 50%;">
	                  		<div id="publish-success" style="display:none;">
	                  				<h3 style="margin: 0 !important;">Publish photo thành công!</h3>
	                  				<h4 id="link-fanpage" style="margin: 10px 0px !important;"></h4>                  				
	                  		</div>
	                  		<!-- 
	                  		<div>	                  			
	                  			<textarea id="description-photo" style="width: 270px;" placeholder="Mô tả thông tin photo"></textarea>
	                  			<p style="font-size: 11px;">Ví dụ: Sản phẩm áo teen Nam-Nữ đẹp. Giảm giá 20%!</p>
	                  		</div>
	                  		!-->
	                  		<div id="publish-page" class="button_container publish_step">
	                  			                  		
	                  			<div id="pub_btn_wrap">
	                  			
	                  				<a id="publish_to_fanpage" class="facebook-connect-cover publish_button clickable left" href="#myModal" role="button" data-toggle="modal" title="Publish to my Fanpage">
				    					<span class="fb-cover-inner fb-profile-logo left"></span>
										<span class="fb-cover-inner fb-cover-text right">
											Publish to my Fanpage
										</span>									
									</a>
	                  			
	                  			</div>
	                  			
	                  		</div>
	                  	</div>
                  </div>		
		
		</div>
		</div>
		</div> 
	</div>

</div>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" >×</button>
        <h5 id="myModalLabel">Publish Photo</h5>
    </div>
    <div class="modal-body">
        
        <div class="facebookPageSelect">
        
        	<?php foreach( $this->list_shop as $key => $val):?>
        
        	<div class="page">
  				<div class="image">
    				<a href="javascript:void(0);"><img src="http://graph.facebook.com/<?php echo $val["pageid"];?>/picture"></a>
  				</div>
	  			<div class="info">
	    			<a href="javascript:void(0);" class="name"><?php echo $val["name"];?></a>
	    			<span class="fans">Fan Page</span>
	   
		    		<div class="chooseButton">
		        		<a href="javascript:void(0);" class="orangeButton" onclick="publish('<?php echo $val["pageid"];?>','<?php echo $val["id"];?>','<?php echo $val["name"];?>');" aria-hidden="true" data-dismiss="modal">Chọn</a>
		    		</div>
	  			</div>
			</div>
			
			<?php endforeach;?>
        
        </div>
        
    </div>

</div>

	
<script id="main">

var template = 1;
var canvas, canvas1,canvas2,canvas3,result,canvas_text;
var up,up1,up2,up3,type,type_canvas,img1,img2,img3,img4,imgrender;

//Select Sticker
function selectSticker(id){

	for(i=1;i<38;i++){

		$("#item"+i).css("opacity","1");

	}

	$("#item"+id).css("opacity","0.3");
	var val = $("#select-sticker").val(id);
	
}

//Add Sticker
function addSticker(){

	var id = $("#select-sticker").val();

	if(id){
		var val = $("#item"+id).attr("src");

		fabric.Image.fromURL(val, function(img) {
			 img.set({
			    left: 100,
			    top: 200,		    	    		    
			 });
			 img = scaleImage(100,100,img);	
			 canvas.add(img);
			 canvas.bringToFront(img);
			  
		});
	}else{
		alert("Bạn chưa chọn Sticker nào!");
	}
	
	
	
}

// Remove Select All Object

function removeSelectObject(cv){

	if(cv){

		var activeObject = cv.getActiveObject();
	    if(activeObject){
	    	activeObject.selection = false;
	    	activeObject.hasControls = false;
	    	activeObject.hasBorders = false;
	    	cv.renderAll();	
	    }
	
	}
	
}

//Merge Canvas

function merge(){
	
	var canvas_publish = document.getElementById('publish');

	removeSelectObject(canvas);
	removeSelectObject(canvas1);
	removeSelectObject(canvas2);
	removeSelectObject(canvas3);
	removeSelectObject(canvas_text);		    	

	if (canvas)
		var ctx = canvas.getContext("2d");
	if (canvas_text)
		var ctx_text = canvas_text.getContext("2d");
	if (canvas1)
		var ctx1 = canvas1.getContext("2d");
	if (canvas2)
		var ctx2 = canvas2.getContext("2d");
	if (canvas3)
		var ctx3 = canvas3.getContext("2d");
	if (canvas_text)
		var ctx3 = canvas_text.getContext("2d");	

	switch(template){

		case 1:

			var imgData=ctx.getImageData(0,0,400,400);				
			// save main canvas contents
			var ctx_result = canvas_publish.getContext('2d');
			ctx_result.putImageData(imgData,0,0);
			
			
		case 2:

			switch(type_canvas){

				case 1:
	
					var imgData=ctx.getImageData(0,0,200,400);
					var imgData1=ctx1.getImageData(0,0,200,400);	
					// save main canvas contents
					var ctx_result = canvas_publish.getContext('2d');
					ctx_result.putImageData(imgData,0,0);
					ctx_result.putImageData(imgData1,200,0);		
					break;
	
				case 2:
					var imgData=ctx.getImageData(0,0,400,325);
					var imgDataText=ctx_text.getImageData(0,0,400,75);
					var imgData1=ctx1.getImageData(0,0,150,150);
					// save main canvas contents
					var ctx_result = canvas_publish.getContext('2d');
					ctx_result.putImageData(imgData,0,0);
					ctx_result.putImageData(imgDataText,0,250);
					ctx_result.putImageData(imgData1,0,175);
					break;
	
				case 3:
					var imgData=ctx.getImageData(0,0,400,325);
					var imgDataText=ctx_text.getImageData(0,0,400,75);
					var imgData1=ctx1.getImageData(0,0,150,150);
					// save main canvas contents
					var ctx_result = canvas_publish.getContext('2d');
					ctx_result.putImageData(imgData,0,0);
					ctx_result.putImageData(imgDataText,0,250);
					ctx_result.putImageData(imgData1,250,175);
					break;
				case 4:
					var imgData=ctx.getImageData(0,0,400,325);
					var imgDataText=ctx_text.getImageData(0,0,400,75);
					
					// save main canvas contents
					var ctx_result = canvas_publish.getContext('2d');
					ctx_result.putImageData(imgData,0,0);		
					ctx_result.putImageData(imgDataText,0,250);			
					break;

			}				
					
			break;

		case 3:
			
			var imgData=ctx.getImageData(0,0,400,265);
			var imgData1=ctx1.getImageData(0,0,130,130);
			var imgData2=ctx2.getImageData(0,0,130,130);
			var imgData3=ctx3.getImageData(0,0,130,130);
			// save main canvas contents
			var ctx_result = canvas_publish.getContext('2d');
			ctx_result.putImageData(imgData,0,0);
			ctx_result.putImageData(imgData1,0,270);
			ctx_result.putImageData(imgData2,135,270);
			ctx_result.putImageData(imgData2,270,270);
			break;
	}
	
}

function getTextCanvas(){

	if(canvas_text && (template ==2 && (type_canvas == 2 || type_canvas == 3 || type_canvas == 4 ))){	
	
		var objects = canvas_text.getObjects();
	
		var s="";
		
		for(var i =0;i<objects.length;i++){
	
			
			activeObject = objects[i];
			if (activeObject && activeObject.type === 'text') {
			      s += activeObject.text +"\n";
			}
			
		}								
	
		$("#product-detail").val(s);
	
	}
	
}


function publishPhoto(){

	merge();
	
	getTextCanvas();	

	$("#publish-success").hide();

	$("#btn-publish").hide();

	$("#publish-photo").show();
	
}

function publish(pageid,shopid,namepage){

	var canvas_publish = document.getElementById('publish');
	var img = new Image();
	img.crossOrigin = "Anonymous";
	img.src = canvas_publish.toDataURL('image/png');
	

	//HANDLE UPLOAD BUTTON
    
    var callback= function(response){
    	console.log("image uploaded successfully! :)");
    	console.log(response);

    	$("#canvas_loading_publish").hide();
    	$("#image-uploading-progress-text-publish").hide();

    	$("#publish-success").show();
    	$("#link-fanpage").html('Bạn có thể xem photo được upload đến fanpage tại: <a href="http://facbook.com/'+pageid+'">Facebook FanPage '+namepage+'</a>');    
    	
    	alert("upload thanh cong");    	
    }

	$("#canvas_loading_publish").show();
	$("#image-uploading-progress-text-publish").show();

	var des = $("#description-photo").val();
	var product_detail = $("#product-detail").val();
    
    jic.upload(img.src, '<?php echo $url;?>/app/index/uploadphoto/?page='+pageid+'&shopid='+shopid+'&des='+des+'&detail='+product_detail, 'file', 'new.jpg',callback);
	
}


createCanvas(template);


(function(){

// Event delete Sticker
$(document).keydown(function(e){
    var keyPressed = String.fromCharCode(e.which);
    var activeObject = canvas.getActiveObject();
    if(activeObject){
	    if (activeObject.name != "img1" && activeObject.name != "img2" && activeObject.name != "img3" && activeObject.name != "img4")
	    {
	    	if (e.which == 46) //delete
	        {
	    		canvas.remove(activeObject);
	            canvas.renderAll();
	            return;
	        }
	
	    }
    }
});
	


	
//Upload File

var options = {
        //target:        '#tutor',   // target element(s) to be updated with server response
        beforeSubmit:  showRequest,  // pre-submit callback
        success:       showResponse  // post-submit callback
       
};

$('#myfile').change(function() {

	$("#canvas_loading").show();
	$("#image-uploading-progress-text").show();	
    
	$('#myForm').submit();    
});

// bind form using 'ajaxForm'
 // bind to the form's submit event 
$('#myForm').submit(function() { 
    // inside event callbacks 'this' is the DOM element so we first 
    // wrap it in a jQuery object and then invoke ajaxSubmit
    $(this).ajaxSubmit(options); 

    // !!! Important !!! 
    // always return false to prevent standard browser submit and page navigation 
    return false; 
}); 


// pre-submit callback
function showRequest(formData, jqForm, options) {

    var queryString = $.param(formData);

    return true;
}

// post-submit callback
function showResponse(responseText, statusText, xhr, $form)  {

	$("#canvas_loading").hide();
	$("#image-uploading-progress-text").hide();

	switch(template){
	
		case 1:
	
			fabric.Image.fromURL('<?php echo $url;?>/photo/'+responseText, function(img) {
				 img.set({
				    left: 200,
				    top: 200,
				    hasControls: false,		    		    
				    selection: false,
				    hasBorders : false,
				    	    		    
				 });
				 img.name = "img1";
	
				 if(img1){
	
					 canvas.remove(img1);
					 
				 }
				 
				 img1 = img; 
				 canvas.remove(up1);
				 img = scaleImage(400,400,img);				  
				 canvas.add(img);
				 canvas.sendToBack(img);
				    
			});

			break;
		
		case 2:
	
			if(type ==1){
	
	    		fabric.Image.fromURL('<?php echo $url;?>/photo/'+responseText, function(img) {
		    		 img.set({
		    		    left: 100,
		    		    top: 200,
		    		    hasControls: false,		    		    
		    		    selection: false,
		    		    hasBorders : false
		    		    	    		    
		    		 });
		    		 img.name = "img1";		    		  	    		  
		    		 canvas.remove(up1);

		    		 if(type_canvas == 1){
		    			 img = scaleImage(200,400,img);
		    		 }else{
			    		 img = scaleImage(400,325,img);
			    	 }		    		 	
		    		 if(img1){
		    			 canvas.remove(img1);					 
					 }
			    		  
		    		 canvas.add(img);
		    		 canvas.sendToBack(img);
		    		  img1 = img;
		    		  
		    		  
		    	});
	
	    	}
			else{
	
				switch(type_canvas){
	
					case 1:
						fabric.Image.fromURL('<?php echo $url;?>/photo/'+responseText, function(img) {
				    		  img.set({
				    		    left: 100,
				    		    top: 200,
				    		    hasControls: false,
				    		    selection: false,
				    		    hasBorders : false	    		    
				    		  });

				    		  img = scaleImage(200,400,img);
				    		  
				    		  img.name = "img2"
				    		  canvas1.remove(up2);
	
				    		  if(img1){
				    			 canvas1.remove(img1);					 
							  }
					    		 
				    		  canvas1.add(img);
				    		  
				    		  img2 = img;
				    		  
				    	});
								
						break;
	
					case 2:
					case 3:
						fabric.Image.fromURL('<?php echo $url;?>/photo/'+responseText, function(img) {
				    		  img.set({
				    		    left: 75,
				    		    top: 75,
				    		    hasControls: false,
				    		    selection: false,
				    		    hasBorders : false	    		    
				    		  });

				    		  img = scaleImage(150,150,img);					    	  
				    		  img.name = "img2"
				    		  canvas1.remove(up2);
	
				    		  if(img1){
				    			 canvas1.remove(img1);					 
							  }
					    		 
				    		  canvas1.add(img);
				    		  
				    		  img2 = img;
	
				    		  canvas1.calcOffset();
				    		  canvas.calcOffset(); 
				    		  
				    	});
						
						
						break;
					}
	
				}
				
		break;

		case 3:

			switch(type){

				case 1:
					fabric.Image.fromURL('<?php echo $url;?>/photo/'+responseText, function(img) {
						 img.set({
						    left: 200,
						    top: 132.5,
						    hasControls: false,		    		    
						    selection: false,
						    hasBorders : false,
						    	    		    
						 });
						 img.name = "img1";
						 img = scaleImage(400,265,img);
						 if(img1){
			
							 canvas.remove(img1);
							 
						 }
						 
						 img1 = img; 
						 canvas.remove(up);
						  
						 canvas.add(img);
						 canvas.sendToBack(img);
						    
					});
					break;

				case 2:
					fabric.Image.fromURL('<?php echo $url;?>/photo/'+responseText, function(img) {
						 img.set({
						    left: 60,
						    top: 60,
						    hasControls: false,		    		    
						    selection: false,
						    hasBorders : false,
						    	    		    
						 });
						 img.name = "img2";
						 img = scaleImage(130,130,img);
						 if(img2){
			
							 canvas1.remove(img2);
							 
						 }
						 
						 img2 = img; 
						 canvas1.remove(up1);						  
						 canvas1.add(img2);
						    
					});
					break;
				case 3:
					fabric.Image.fromURL('<?php echo $url;?>/photo/'+responseText, function(img) {
						 img.set({
						    left: 60,
						    top: 60,
						    hasControls: false,		    		    
						    selection: false,
						    hasBorders : false,
						    	    		    
						 });
						 img.name = "img3";
						 img = scaleImage(130,130,img);
						 if(img3){
			
							 canvas2.remove(img3);
							 
						 }
						 
						 img3 = img; 
						 canvas2.remove(up2);						  
						 canvas2.add(img3);
						    
					});
					break;

				case 4:
					fabric.Image.fromURL('<?php echo $url;?>/photo/'+responseText, function(img) {
						 img.set({
						    left: 60,
						    top: 60,
						    hasControls: false,		    		    
						    selection: false,
						    hasBorders : false
						    	    		    
						 });
						 img.name = "img4";
						 img = scaleImage(130,130,img);
						 if(img4){
			
							 canvas3.remove(img4);
							 
						 }
						 
						 img4 = img; 
						 canvas3.remove(up3);						  
						 canvas3.add(img4);
						    
					});
					break;
			
			}
			break;
				
				
	}
	                  
}

})();

function createCanvas(temp,type_cv){
	
	$("#canvas-editor").html("");

	template = temp;

	type_canvas = type_cv;
	
	switch(temp){

	case 1:
		var cv = document.createElement('canvas');
		cv.id     = "c";
		cv.width  = 400;
		cv.height = 400;
		cv.style.zIndex   = 8;		
		var canvas_editor = document.getElementById("canvas-editor");
		canvas_editor.appendChild(cv);
		
		canvas = new fabric.Canvas('c');
		
		canvas.on({

			'mouse:up': onObjectMouseUp
			  
		});
				
		changeTemplate(temp);
				
		break;
	case 2:

		switch(type_canvas){

			case 1:

				var cv = document.createElement('canvas');
				cv.id     = "c";
				cv.width  = 200;
				cv.height = 400;
				cv.style.zIndex   = 7;
				cv.style.position = "absolute";

				var cv1 = document.createElement('canvas');
				cv1.id     = "c1";
				cv1.width  = 200;
				cv1.height = 400;
				cv1.style.zIndex   = 8;
				cv1.style.position = "absolute";
				var canvas_editor = document.getElementById("canvas-editor");
				canvas_editor.appendChild(cv);
				canvas_editor.appendChild(cv1);						
				
				break;
			case 2:

				var div = document.createElement('div');
				div.id     = "div-canvas";
				div.style.width  = '400px';
				div.style.height = '400px';
				div.style.float = 'left';

				var div_text = document.createElement('div');
				div_text.id     = "div-canvas-text";
				div_text.style.width  = '400px';
				div_text.style.height = '75px';
				div_text.style.position = 'absolute';
				div_text.style.left = '0';
				div_text.style.bottom = '0';
				div_text.style.zIndex   = 8;
				div_text.style.background   = 'white';
				
				var div1 = document.createElement('div');
				div1.id     = "div-canvas1";
				div1.style.width  = '150px';
				div1.style.height = '150px';
				div1.style.position = 'absolute';
				div1.style.left = '0';
				div1.style.bottom = '0';
				div1.style.zIndex   = 100;
								
				var cv = document.createElement('canvas');
				cv.id     = "c";
				cv.width= 400;
				cv.height=325;				
				div.appendChild(cv);

				var cv_text = document.createElement('canvas');
				cv_text.id     = "c-txt";
				cv_text.width= 400;
				cv_text.height=75;				
				div_text.appendChild(cv_text);
								
				var cv1 = document.createElement('canvas');
				cv1.id     = "c1";
				cv1.width= 150;
				cv1.height=150;				
				div1.appendChild(cv1);

				var canvas_editor = document.getElementById("canvas-editor");
				canvas_editor.appendChild(div);
				canvas_editor.appendChild(div_text);
				canvas_editor.appendChild(div1);
				
				break;		

			case 3:
				var div = document.createElement('div');
				div.id     = "div-canvas";
				div.style.width  = '400px';
				div.style.height = '400px';
				div.style.float = 'left';

				var div_text = document.createElement('div');
				div_text.id     = "div-canvas-text";
				div_text.style.width  = '400px';
				div_text.style.height = '75px';
				div_text.style.position = 'absolute';
				div_text.style.left = '0';
				div_text.style.bottom = '0';
				div_text.style.zIndex   = 8;
				div_text.style.background   = 'white';

				var div1 = document.createElement('div');
				div1.id     = "div-canvas1";
				div1.style.width  = '150px';
				div1.style.height = '150px';
				div1.style.position = 'absolute';
				div1.style.left = '250px';
				div1.style.bottom = '0';
				div1.style.zIndex   = 100;
								
				var cv = document.createElement('canvas');
				cv.id     = "c";
				cv.width= 400;
				cv.height=325;				
				div.appendChild(cv);

				var cv_text = document.createElement('canvas');
				cv_text.id     = "c-txt";
				cv_text.width= 400;
				cv_text.height=75;				
				div_text.appendChild(cv_text);
				
				var cv1 = document.createElement('canvas');
				cv1.id     = "c1";
				cv1.width= 150;
				cv1.height=150;				
				div1.appendChild(cv1);

				var canvas_editor = document.getElementById("canvas-editor");
				canvas_editor.appendChild(div);
				canvas_editor.appendChild(div_text);
				canvas_editor.appendChild(div1);			

				break;

			case 4:

				var div = document.createElement('div');
				div.id     = "div-canvas";
				div.style.width  = '400px';
				div.style.height = '400px';
				div.style.float = 'left';

				var div_text = document.createElement('div');
				div_text.id     = "div-canvas-text";
				div_text.style.width  = '400px';
				div_text.style.height = '75px';
				div_text.style.position = 'absolute';
				div_text.style.left = '0';
				div_text.style.bottom = '0';
				div_text.style.zIndex   = 8;
				div_text.style.background   = 'white';				
								
				var cv = document.createElement('canvas');
				cv.id     = "c";
				cv.width= 400;
				cv.height=325;				
				div.appendChild(cv);

				var cv_text = document.createElement('canvas');
				cv_text.id     = "c-txt";
				cv_text.width= 400;
				cv_text.height=75;				
				div_text.appendChild(cv_text);								
				
				var canvas_editor = document.getElementById("canvas-editor");
				canvas_editor.appendChild(div);
				canvas_editor.appendChild(div_text);
								
				break;		
						
		}
		
		canvas = new fabric.Canvas('c');

		canvas1 = new fabric.Canvas('c1');

		

		canvas_text = new fabric.Canvas('c-txt');
				
		addText();
		
		canvas.on({

			'mouse:up': onObjectMouseUp
			  
		});

		canvas1.on({
			
			'mouse:up': onObjectMouseUp1
			  
		});

		changeTemplate(temp);
		

		canvas.backgroundColor = 'rgba(119,119,119,0.3)';
		canvas.renderAll();
		canvas1.backgroundColor = 'rgba(119,119,119,0.3)';
		canvas1.renderAll();
		
		break;


	case 3:

		var div = document.createElement('div');
		div.id  = "div-canvas";
		div.style.width  = '400px';
		div.style.height = '400px';
		

		var div1 = document.createElement('div');
		div1.id  = "div-canvas1";
		div1.style.width  = '130px';
		div1.style.height = '130px';
		div1.style.position = 'absolute';
		div1.style.left = '0';
		div1.style.bottom = '0';
		div1.style.zIndex   = 100;

		var div2 = document.createElement('div');
		div2.id  = "div-canvas2";
		div2.style.width  = '130px';
		div2.style.height = '130px';
		div2.style.position = 'absolute';
		div2.style.left = '135px';
		div2.style.bottom = '0';
		div2.style.zIndex   = 100;

		var div3 = document.createElement('div');
		div3.id  = "div-canvas3";
		div3.style.width  = '130px';
		div3.style.height = '130px';
		div3.style.position = 'absolute';
		div3.style.left = '270px';
		div3.style.bottom = '0';
		div3.style.zIndex   = 100;
						
		var cv = document.createElement('canvas');
		cv.id     = "c";
		cv.width= 400;
		cv.height=265;				
		div.appendChild(cv);
						
		var cv1 = document.createElement('canvas');
		cv1.id     = "c1";
		cv1.width= 130;
		cv1.height=130;				
		div1.appendChild(cv1);

		var cv2 = document.createElement('canvas');
		cv2.id     = "c2";
		cv2.width= 130;
		cv2.height=130;				
		div2.appendChild(cv2);

		var cv3 = document.createElement('canvas');
		cv3.id     = "c3";
		cv3.width= 130;
		cv3.height=130;				
		div3.appendChild(cv3);

		var canvas_editor = document.getElementById("canvas-editor");
		canvas_editor.appendChild(div);
		canvas_editor.appendChild(div1);
		canvas_editor.appendChild(div2);
		canvas_editor.appendChild(div3);
		
		
		canvas = new fabric.Canvas('c');
		
		canvas1 = new fabric.Canvas('c1');

		canvas2 = new fabric.Canvas('c2');

		canvas3 = new fabric.Canvas('c3');
		
		canvas.on({
		
			'mouse:up': onObjectMouseUp
			  
		});
		
		canvas1.on({
			
			'mouse:up': onObjectMouseUp1
			  
		});

		canvas2.on({
			
			'mouse:up': onObjectMouseUp2
			  
		});

		canvas3.on({
			
			'mouse:up': onObjectMouseUp3
			  
		});
		
		changeTemplate(temp);
				
		canvas.backgroundColor = 'rgba(119,119,119,0.3)';
		canvas.renderAll();
		canvas1.backgroundColor = 'rgba(119,119,119,0.3)';
		canvas1.renderAll();
		
		
		
		
		break;

		

}



// End Switch


// Add Text

function addText(){

	switch(type_canvas){

		case 2:	

			var text = "Mobistar Toch Kem 432";
			
			var textSample = new fabric.Text(text.toString(), {
			    left: 155,
			    top: 15,
			    fontFamily: 'Helvetica',	
			    fontSize:22,      
			    fill: '#d8ab72',	      
			    originX: 'left',
			    hasControls: false,		    		    
				selection: false,		  
			    
			    
			});

			var text = "IPS 4.3''/ 8MM/ 4GB/ 2SIM/ Trắng";
			
			var textSample1 = new fabric.Text(text.toString(), {
			    left: 155,
			    top: 38,
			    fontFamily: 'Helvetica',	
			    fontSize:16,      
			    fill: '#5e5e5e',
			    useNative: true,	      
			    originX: 'left',		    
			    hasControls: false,		    		    
				  selection: false,		  
			    
			    
			});

			var text = "999,000đ";
			
			var textSample2= new fabric.Text(text.toString(), {
			    left: 155,
			    top: 58,
			    fontFamily: 'Helvetica',
			    fontWeight: 'bold',	
			    fontSize:22,      
			    fill: '#d8ab72',	      
			    originX: 'left',
			    hasControls: false,		    		    
				selection: false,		  
			    
			    
			});

			canvas_text.add(textSample);
			canvas_text.add(textSample1);
			canvas_text.add(textSample2);
					
			break;

		case 3:
		case 4:
			var text = "Mobistar Toch Kem 432";
			
			var textSample = new fabric.Text(text.toString(), {
			    left: 0,
			    top: 15,
			    fontFamily: 'Helvetica',	
			    fontSize:22,      
			    fill: '#d8ab72',	      
			    originX: 'left',
			    hasControls: false,		    		    
				selection: false,		  
			    
			    
			});

			var text = "IPS 4.3''/ 8MM/ 4GB/ 2SIM/ Trắng";
			
			var textSample1 = new fabric.Text(text.toString(), {
			    left: 0,
			    top: 38,
			    fontFamily: 'Helvetica',	
			    fontSize:16,      
			    fill: '#5e5e5e',
			    useNative: true,	      
			    originX: 'left',		    
			    hasControls: false,		    		    
				  selection: false,		  
			    
			    
			});

			var text = "999,000đ";
			
			var textSample2= new fabric.Text(text.toString(), {
			    left: 0,
			    top: 58,
			    fontFamily: 'Helvetica',
			    fontWeight: 'bold',	
			    fontSize:22,      
			    fill: '#d8ab72',	      
			    originX: 'left',
			    hasControls: false,		    		    
				  selection: false,		  
			    
			    
			});

			canvas_text.add(textSample);
			canvas_text.add(textSample1);
			canvas_text.add(textSample2);
					
			break;

	}
	
		
}


 //Range Control

$("#scale-control").change(function(event, value) {    
	
	switch(template){

		case 1:
		
		case 2:
			if(type == 1){
		    	 img1.scale(value).setCoords();
				 canvas.renderAll();
		    }
	
		    if(type == 2){
		    	img2.scale(value).setCoords();
				canvas1.renderAll();
		    }
		    break;
		case 3:
			switch(type){

				case 1:
					img1.scale(value).setCoords();
					canvas.renderAll();
					break;
				case 2:
					img2.scale(value).setCoords();
					canvas1.renderAll();
					break;
				case 3:
					img3.scale(value).setCoords();
					canvas2.renderAll();
					break;
				case 4:
					img4.scale(value).setCoords();
					canvas3.renderAll();
					break;
			}	    

	}
	  
});

$("#angle-control").change(function(event, value) {

	switch(template){

		case 1:			
		case 2:
			if(type == 1){
		    	 img1.setAngle(value).setCoords();
				 canvas.renderAll();
		    }
	
		    if(type == 2){
		    	img2.setAngle(value).setCoords();
				canvas1.renderAll();
		    }
		case 3:
			switch(type){

				case 1:
					img1.setAngle(value).setCoords();
					canvas.renderAll();
					break;
				case 2:
					img2.setAngle(value).setCoords();
					canvas1.renderAll();
					break;
				case 3:
					img3.setAngle(value).setCoords();
					canvas2.renderAll();
					break;
				case 4:
					img4.setAngle(value).setCoords();
					canvas3.renderAll();
					break;
		}
		
	}
      
});


function calcCanvas(){
	if(canvas)
		canvas.calcOffset();
	if(canvas1)
		canvas1.calcOffset();
	if(result)
		result.calcOffset();	
}

if(canvas){

	canvas.on('object:selected', onCanvasObjectSelected);

	canvas.on('selection:cleared', function(e) {
		$('#image-change').hide();
        $('#scale-angle').hide();
	    calcCanvas();
	});
		
}

if(canvas1){

	canvas1.on('object:selected', onCanvasObjectSelected);

	canvas1.on('selection:cleared', function(e) {
		$('#image-change').hide();
        $('#scale-angle').hide();
	    calcCanvas();
	});
		
}

if(canvas2){

	canvas2.on('object:selected', onCanvasObjectSelected);

	canvas2.on('selection:cleared', function(e) {
		$('#image-change').hide();
        $('#scale-angle').hide();
	    calcCanvas();
	});
		
}

if(canvas3){

	canvas3.on('object:selected', onCanvasObjectSelected);

	canvas3.on('selection:cleared', function(e) {
		$('#image-change').hide();
        $('#scale-angle').hide();
	    calcCanvas();
	});
		
}

if(canvas_text){	
	canvas_text.on('object:selected', onObjectSelected);
}

if(result){

	result.on('object:selected', onObjectSelected);

	result.on('selection:cleared', function(e) {
		$('#image-change').hide();
        $('#scale-angle').hide();
	    $('#text-wrapper').hide();
	    calcCanvas();
	});

}

function onCanvasObjectSelected(e) {
    var selectedObject = e.target;

    $('#image-change').show();
    $('#scale-angle').show();

    calcCanvas();    
    
}



function onObjectSelected(e) {
	
    var selectedObject = e.target;

    var colorEl = document.getElementById('color');
    colorEl && (colorEl.value = selectedObject.getFill());


    if (selectedObject.name === 'img1' || selectedObject.name === 'img2' ) {
        $('#image-change').show();
        $('#scale-angle').show();
       
    }
    
    

    if (selectedObject.type === 'text') {	    
        $('#text-wrapper').show();
        $('#text-wrapper textarea').val(selectedObject.getText());
       
    }
    else {
        $('#text-wrapper').hide();
        
    }

    calcCanvas();    
    
}

	
//Add Text

document.getElementById('add-text').onclick = function() {

  var text = $('#text-canvas').val();
	 
  var textSample = new fabric.Text(text.toString(), {
    left: 100,
    top: 200,
    fontFamily: 'helvetica',	
    fontSize:28,      
    fill: 'red',	      
    originX: 'left',
    hasControls: false,		    		    
	  selection: false,		  
    
    
  });
  canvas.add(textSample);	    
};

var textEl = document.getElementById('text-canvas');

if (textEl && canvas_text) {
  textEl.onfocus = function() {
    var activeObject = canvas_text.getActiveObject();

    if (activeObject && activeObject.type === 'text') {
      this.value = activeObject.text;
        
    }
  };
  textEl.onkeyup = function(e) {
    var activeObject = canvas_text.getActiveObject();
    if (activeObject) {

    	activeObject.setText(this.value);
      
      canvas_text.renderAll();
    }
  };
}

if (textEl && canvas) {
  textEl.onfocus = function() {
    var activeObject = canvas.getActiveObject();

    if (activeObject && activeObject.type === 'text') {
      this.value = activeObject.text;
        
    }
  };
  textEl.onkeyup = function(e) {
    var activeObject = canvas.getActiveObject();
    if (activeObject) {

    activeObject.setText(this.value);
      
      canvas.renderAll();
    }
  };
}




// Font Family

var fontFamilySwitch = document.getElementById('font-family');
if (fontFamilySwitch) {
 
  fontFamilySwitch.onchange = function() {

	    
    var activeObject = canvas_text.getActiveObject();
    if (activeObject && activeObject.type === 'text') {
      activeObject.fontFamily = this.value.toLowerCase();
      canvas_text.renderAll();
    }
  };
}

// Font Size
var textFontSizeField = document.getElementById('text-font-size');
if (textFontSizeField) {
  textFontSizeField.onchange = function() {
    var activeObject = canvas_text.getActiveObject();
    if (activeObject && activeObject.type === 'text') {
      activeObject.setFontSize(parseInt(this.value, 10));
      canvas_text.renderAll();
    }
  };
}

// Font Bold

var cmdBoldBtn = document.getElementById('font_style_bold');
if (cmdBoldBtn) {	    
  cmdBoldBtn.onclick = function() {
    var activeObject = canvas_text.getActiveObject();
    if (activeObject && activeObject.type === 'text') {
      activeObject.fontWeight = (activeObject.fontWeight == 'bold' ? '' : 'bold');
      this.className = activeObject.fontWeight ? this.className + ' selected' : this.className.replace(' selected', '');
      canvas_text.renderAll();
    }
  };
}

// Font Italic

var cmdItalicBtn = document.getElementById('font_style_italic');
if (cmdItalicBtn) {
  
  cmdItalicBtn.onclick = function() {
    var activeObject = canvas_text.getActiveObject();
    if (activeObject && activeObject.type === 'text') {
      activeObject.fontStyle = (activeObject.fontStyle == 'italic' ? '' : 'italic');
      this.className = activeObject.fontStyle ? this.className + ' selected' : this.className.replace(' selected', '');
      canvas_text.renderAll();
    }
  };
}

// Font Underline
var cmdUnderlineBtn = document.getElementById('font_style_underline'),cmdLinethroughBtn = document.getElementById('font_style_linethrough');

if (cmdUnderlineBtn) {
 
 
  cmdUnderlineBtn.onclick = function() {
    var activeObject = canvas_text.getActiveObject();
    if (activeObject && activeObject.type === 'text') {
      activeObject.textDecoration = (activeObject.textDecoration == 'underline' ? '' : 'underline');
      
      canvas_text.renderAll();
    }
  };
}

if (cmdLinethroughBtn) {
	   
	    cmdLinethroughBtn.onclick = function() {
	      var activeObject = canvas_text.getActiveObject();
	      if (activeObject && activeObject.type === 'text') {
	        activeObject.textDecoration = (activeObject.textDecoration == 'line-through' ? '' : 'line-through');
	        
	        canvas_text.renderAll();
	      }
	    };
	  }

// Color 

var colorpicker = document.getElementById('color');

colorpicker.onchange = function() {
	
  var activeObject = canvas_text.getActiveObject();
    if (activeObject && activeObject.type === 'text') {
    	activeObject.setFill(this.value);
    	canvas_text.renderAll();
  }
};

// Thay đổi Image

var image_change = document.getElementById('image-change');

image_change.onclick = function() {

	$("#browse").parent().find('input').click();
	
}


function onObjectMouseUpTemp1(e){

	var activeObject = e.target;

	if (activeObject.name == "up" ){			
		
		$("#browse").parent().find('input').click();

	}
}

function onObjectMouseUp(e){
	
	var activeObject = e.target;

	if (activeObject.name == "up1" ){
	
		type =1;	

		$("#browse").parent().find('input').click();

	}

	if(activeObject.name == "img1"){

		type =1;
		
	}
			
}

function onObjectMouseUp1(e){
	
	var activeObject = e.target;

	if (activeObject.name == "up2"){
		type=2;

		$("#browse").parent().find('input').click();
	}
	if(activeObject.name == "img2"){

		type =2;
		
	}
}

function onObjectMouseUp2(e){
	
	var activeObject = e.target;

	if (activeObject.name == "up3"){
		type=3;

		$("#browse").parent().find('input').click();
	}
	if(activeObject.name == "img3"){

		type =3;
		
	}
}

function onObjectMouseUp3(e){
	
	var activeObject = e.target;

	if (activeObject.name == "up4"){
		type=4;

		$("#browse").parent().find('input').click();
	}
	if(activeObject.name == "img4"){

		type =4;
		
	}
}

} // End function create canvas

function scaleImage(targetWidth,targetHeight,activeObject){

	//activeObject is the fabric.Object to scale
			
	//Calculate factors
	
	
	var sx = activeObject.getBoundingRectWidth() / activeObject.getWidth();
	var sy = activeObject.getBoundingRectHeight() / activeObject.getHeight();
		
	//Apply the scale using the factors
	activeObject.scaleToWidth(targetWidth / sx);        
	activeObject.scaleToHeight(targetHeight / sy); 
	
	return activeObject;
	
}

function changeTemplate(temp){

	$("#btn-publish").show();

	$("#publish-photo").hide();			
	
	switch(temp){

		case 1:

			if(img1){
				var objects = canvas.getObjects();

				for(var i =0;i<objects.length;i++){

					canvas.remove(objects.item[i]);
				}
				img1 = scaleImage(400,400,img1);								
				canvas.add(img1);
				canvas.renderAll();
			}
			else{

				fabric.Image.fromURL('<?php echo $url; ?>/application/public/images/Background.png', function(img) {
					  img.set({
					    left: 200,
					    top: 200,					    
					    hasControls: false,
					    selection: false,
					    lockMovementX : true,
					    lockMovementY : true				        
					    
					  });
					  img = scaleImage(400,400,img);
					  img.name = "up1";
					  up1 = img;					  
					  canvas.add(img);
					  
				});

			}

									
			break;

		case 2:
			
			if(img1){

				var objects = canvas.getObjects();

				for(var i =0;i<objects.length;i++){

					
					canvas.remove(objects.item[i]);
					
					
				}	

				if(type_canvas == 1){
					img1 = scaleImage(200,400,img1);
				}
				else{
					img1 = scaleImage(400,325,img1);
				}
											
				canvas.add(img1);
				canvas.renderAll();								
			}
			else{
				switch(type_canvas){

					case 1:

						fabric.Image.fromURL('<?php echo $url;?>/application/public/images/Background360-1.png', function(img) {
							  img.set({
							    left: 100,
							    top: 200,
							    hasControls: false,
							    selection: false,
							    lockMovementX : true,
							    lockMovementY : true	    
							    
							  });
							  img = scaleImage(200,400,img);
							  img.name = "up1";	  
							  canvas.add(img);
							  up1 = img;
							  
						});
														
						
						break;

					case 2:
					case 3:
					case 4:
						

						fabric.Image.fromURL('<?php echo $url;?>/application/public/images/Background480-390.png', function(img) {
							  img.set({
							    left: 200,
							    top: 160,
							    hasControls: false,
							    selection: false,
							    lockMovementX : true,
							    lockMovementY : true	    
							    
							  });
							  img = scaleImage(400,325,img);
							  img.name = "up1";	  
							  canvas.add(img);
							  up1 = img;
							  
						});
						
								
						
						break;
				

				}

			}

			if (img2){
				if(type_canvas == 1){
					img2 = scaleImage(200,400,img2);
				}else{
					img2 = scaleImage(150,150,img2);
				}				
				canvas1.add(img2);
				canvas1.renderAll();

			}else{

				switch(type_canvas){

					case 1:
						fabric.Image.fromURL('<?php echo $url;?>/application/public/images/Background360-2.png', function(img) {
							  img.set({
							    left: 100,
							    top: 200,
							    hasControls: false,
							    selection: false,
							    lockMovementX : true,
							    lockMovementY : true
							    
							  });	
							  img = scaleImage(200,400,img);
							  img.name = "up2";  
							  canvas1.add(img);
							  up2 = img;	  
						});								

						break;						
					case 2:
					case 3:
						fabric.Image.fromURL('<?php echo $url;?>/application/public/images/Background200.png', function(img) {
							  img.set({
							    left: 75,
							    top: 75,
							    hasControls: false,
							    selection: false,
							    lockMovementX : true,
							    lockMovementY : true
							    
							  });	
							  img = scaleImage(150,150,img);
							  img.name = "up2";  
							  canvas1.add(img);
							  up2 = img;	  
						});

						canvas1.calcOffset();   
						
						break;

				}
				
			}
			
			break;

		case 3:

			if(img1){

				var objects = canvas.getObjects();

				for(var i =0;i<objects.length;i++){

					
					canvas.remove(objects.item[i]);
					
					
				}				
				img1 = scaleImage(400,265,img1);				
				canvas.add(img1);
				canvas.renderAll();								
			}
			else{
			
				fabric.Image.fromURL('<?php echo $url;?>/application/public/images/Background480-390.png', function(img) {
					  img.set({
					    left: 200,
					    top: 133,
					    hasControls: false,
					    selection: false,
					    lockMovementX : true,
					    lockMovementY : true	    
					    
					  });
					  img = scaleImage(400,325,img);
					  img.name = "up1";	  
					  canvas.add(img);
					  up1 = img;
					  
				});	
																	
				
			}

			if (img2){

				img2 = scaleImage(130,130,img2);
				canvas1.add(img2);
				canvas1.renderAll();

			}else{

				fabric.Image.fromURL('<?php echo $url;?>/application/public/images/Background200.png', function(img) {
					  img.set({
					    left: 65,
					    top: 65,
					    hasControls: false,
					    selection: false,
					    lockMovementX : true,
					    lockMovementY : true
					    
					  });	
					  img = scaleImage(130,130,img);
					  img.name = "up2";  
					  canvas1.add(img);
					  up2 = img;	  
				});								
			}

			if (img3){

				img3 = scaleImage(130,130,img3);
				canvas2.add(img3);
				canvas2.renderAll();

			}else{

				fabric.Image.fromURL('<?php echo $url;?>/application/public/images/Background200.png', function(img) {
					  img.set({
					    left: 65,
					    top: 65,
					    hasControls: false,
					    selection: false,
					    lockMovementX : true,
					    lockMovementY : true
					    
					  });	
					  img = scaleImage(130,130,img);
					  img.name = "up3";  
					  canvas2.add(img);
					  up3 = img;	  
				});								
			}

			if (img4){

				img4 = scaleImage(130,130,img4);
				canvas3.add(img4);
				canvas3.renderAll();

			}else{

				fabric.Image.fromURL('<?php echo $url;?>/application/public/images/Background200.png', function(img) {
					  img.set({
					    left: 65,
					    top: 65,
					    hasControls: false,
					    selection: false,
					    lockMovementX : true,
					    lockMovementY : true
					    
					  });
					  img = scaleImage(130,130,img);	
					  img.name = "up4";  
					  canvas3.add(img);
					  up4 = img;	  
				});								
			}						

			if(canvas1)
				canvas1.calcOffset();

			if(canvas2)
				canvas2.calcOffset();

			if(canvas3)
				canvas3.calcOffset();
			
			break;			
	}
	
}

</script>

